<template>
  <div class="mainCard mainCardActive">
    <form @submit.prevent="validateBeforeSubmit">
      <div class="card">
        <div class="cardInput">
          <label>
            <Icon type="person-stalker"></Icon>
          </label>
          <p class="control">
            <input name="userName" v-model="userName" v-validate="'required|alpha'" data-vv-delay="1000"
                   :class="{'is-danger': errors.has('userName') }" type="text" placeholder="请输入用户名">
            <span v-show="errors.has('userName')" class="errSpan">{{ errors.first('userName') }}</span>
          </p>
        </div>
        <div class="cardInput">
          <label>
            <Icon type="locked"></Icon>
          </label>
          <p class="control">
            <input name="password" v-model="password" v-validate="'required|min:6|password'" data-vv-delay="1000"
                   :class="{'is-danger': errors.has('password') }" type="text" placeholder="请输入密码">
            <span v-show="errors.has('password')" class="errSpan">{{ errors.first('password') }}</span>
          </p>
        </div>
      </div>
      <div class="btn">
        <button class="btnLogin" type="submit">登录</button>
      </div>
    </form>
  </div>
</template>

<script>
  import api from '../../router/api'
  export default {
    name: 'login',
    data () {
      return {
        isActive: [true, false],
        userName: '',
        password: '',
      }
    },
    methods: {
      loginClick() {
        let $this = this;
        let pram = {
          userName: $this.userName,
          password: $this.password
        };
        $this.$post($this, api.login, pram)
          .then(function (res) {
            $this.$Message.info(res.message);
            window.setTimeout(function () {
              if ($this && !$this._isDestroyed) { //_isDestroyed 组件是否被销毁
                $this.$router.push({
                  path: '/perInfo'
                })
              }
            }, 1000)
          })
      },
      validateBeforeSubmit() {
        let $this = this;
        $this.$validator.validateAll()
          .then((result) => {
            if (result) {
              $this.loginClick();
              return;
            }
            $this.$Message.error('请准确输入账号密码');
          });
      },
    },
    created: function () {
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
